<template class="firstpage">
  <div>
    <div class="boxMargin">
      <el-card>
        <el-row>
          <el-col style="text-align:right">
            <el-button size="small" type="primary" @click="onAdd">新增</el-button>
            <el-button size="small" type="primary" @click="configflushFn">立即刷新</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="boxMargin">
      <el-card>
        <el-tabs v-model="customData.activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="configName" align="center" label="配置项名称" width="200" />
              <el-table-column prop="configKey" align="center" label="配置项configKey" width="260" />
              <el-table-column prop="configValue" align="center" label="配置项">
                <template slot-scope="scope">
                  <span>{{ scope.row.configValue }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="configGroup" align="center" label="配置分组" width="160" />
              <el-table-column align="center" label="操作" width="220">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" @click="onUpdate(scope.row)">更新</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane v-for="(item, index) in customData.tabType" :key="index" :label="item.configGroup" :name="item.configGroup">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="configName" align="center" label="配置项名称" width="200" />
              <el-table-column prop="configKey" align="center" label="配置项configKey" width="260" />
              <el-table-column prop="configValue" align="center" label="配置项">
                <template slot-scope="scope">
                  <span>{{ scope.row.configValue }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="configGroup" align="center" label="配置分组" width="160" />
              <el-table-column align="center" label="操作" width="220">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" @click="onUpdate(scope.row)">更新</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <div class="center">
      <PAGER ref="wptxPager" @search="onChangePage" />
    </div>
    <el-dialog :title="customData.typeVal == 1 ?'新增配置' : '更新配置'" :visible.sync="customData.addShow" center :before-close="handleDialogClose">
      <el-form ref="form" label-width="150px" :model="form" :rules="rules">
        <el-form-item label="配置项名称" prop="configName" required>
          <el-input v-model="form.configName" type="text" maxlength="100" />
        </el-form-item>
        <el-form-item label="配置项configKey" prop="configKey" required>
          <el-input v-model="form.configKey" maxlength="100" />
        </el-form-item>
        <el-form-item label="配置项" prop="configValue" required>
          <el-input v-model="form.configValue" maxlength="100" />
        </el-form-item>
        <el-form-item label="配置分组" prop="configGroup" required>
          <el-input v-model="form.configGroup" maxlength="100" />
        </el-form-item>
        <el-form-item>
          <el-col style="text-align:right">
            <el-button size="small" @click="cannelFn('form')">取消</el-button>
            <el-button type="primary" size="small" @click="onSure('form')">确认</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
import _validate from '../../framework/commonJs/wptx_validate'
import _tools from '../../framework/commonJs/wptx_tools'
import _common from '../../framework/commonJs/wptx_common'
import _api from '@/framework/API/templatement'
import { PAGER } from '@/framework/commonTemplate/'
import { global } from '@/filter/global-api'
const _FUNCTION_NAME = ''
export default {
  components: { PAGER },
  filters: {},
  data() {
    return {
      tableData: [],
      searchData: {
      },
      searchDataBuffer: {
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      selectData: {
        companyList: []
      },
      historyData: {},
      infoData: {},
      customData: {
        activeName: 'all',
        tabType: [],
        fILTERTableData: [],
        addShow: false,
        typeVal: ''
      },
      form: {
        id: '',
        configGroup: '',
        configKey: '',
        configName: '',
        configValue: ''
      },
      rules: {
        configName: [
          { required: true, message: '请输入配置项名称', trigger: 'blur' }
        ],
        configKey: [
          { required: true, message: '请输入配置项configKey', trigger: 'blur' }
        ],
        configValue: [
          { required: true, message: '请输入配置项', trigger: 'blur' }
        ],
        configGroup: [
          { required: true, message: '请输入配置分组', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    'customData.addShow': function(data) {
      if (data == false) {
        this.customData.addShow = false
        this.form = {
          id: '',
          configGroup: '',
          configKey: '',
          configName: '',
          configValue: ''
        }
      }
    }
  },
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
    _api.configlistGroup(this, {}, this.callBack_configlistGroup)
  },
  beforeDestroy() { },
  methods: {
    onInit() {
      const self = this
      const params = {
        configGroup: self.customData.activeName == 'all' ? '' : self.customData.activeName,
        pageNo: self.$refs.wptxPager.pageData.pageNo,
        pageSize: self.$refs.wptxPager.pageData.pageSize
      }
      _api.configPage(self, params, self.callBack_page)
    },
    onChangePage() {
      const self = this
      const data = {
        configGroup: self.customData.activeName == 'all' ? '' : self.customData.activeName,
        pageNo: self.$refs.wptxPager.pageData.pageNo,
        pageSize: self.$refs.wptxPager.pageData.pageSize
      }
      _api.configPage(self, data, self.callBack_page)
    },
    onReset(data) {
      const self = this
      _tools.reset(self.searchData)
      _tools.reset(self.searchDataBuffer)
      self.onInit()
    },
    onAdd(data) {
      const self = this
      self.customData.addShow = true
      self.customData.typeVal = 1
      self.form = {
        id: '',
        configGroup: '',
        configKey: '',
        configName: '',
        configValue: ''
      }
    },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(data) {
      const self = this
      const regs = /[\u4e00-\u9fa5]/g
      const params = {}
      self.customData.typeVal = 2
      self.customData.addShow = true
      self.form = {
        id: data.id,
        configGroup: data.configGroup,
        configKey: data.configKey,
        configName: data.configName,
        configValue: data.configValue
      }
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },

    onUpload(data) {
    },
    onBathUpload() { },
    onExport() {
    },
    onDownload(data) { },
    onHistory(data) { },
    onSure(formName, data) {
      const self = this
      let params = {}
      const regs = /[\u4e00-\u9fa5]/g
      if (self.customData.typeVal == 1) {
        self.$refs[formName].validate(valid => {
          if (valid) {
            if (_validate.checkEmpty(self.form.configKey)) {
              _tools.openTip(self, '配置项configKey为空', 'warning')
              return false
            }
            if (regs.test(self.form.configValue)) {
              _tools.openTip(self, '配置项不可包含汉字', 'warning')
              return false
            }
            _api.configCreate(self, self.form, self.callBack_configCreate)
          } else {
            _tools.error('error submit!!')
            return false
          }
        })
      } else if (self.customData.typeVal == 2) {
        self.$refs[formName].validate(valid => {
          if (valid) {
            if (_validate.checkEmpty(self.form.configName)) {
              _tools.openTip(self, '配置项名称为空', 'warning')
              return false
            }
            if (_validate.checkEmpty(self.form.configKey)) {
              _tools.openTip(self, '配置项configKey为空', 'warning')
              return false
            }
            if (regs.test(self.form.configKey)) {
              _tools.openTip(self, '配置项configKey不可包含汉字', 'warning')
              return false
            }
            if (_validate.checkEmpty(self.form.configGroup)) {
              _tools.openTip(self, '配置分组为空', 'warning')
              return false
            }
            if (_validate.checkEmpty(self.form.configValue)) {
              _tools.openTip(self, '配置项为空', 'warning')
              return false
            }
            params = {
              id: self.form.id,
              configGroup: self.form.configGroup,
              configKey: self.form.configKey,
              configName: self.form.configName,
              configValue: self.form.configValue
            }
            self.$confirm('确定要更新改配置项吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              _api.configUpdate(self, params, self.callBack_onConfigValue)
            }).catch(() => {
              self.$message({
                type: 'info',
                message: '已取消该操作'
              })
            })
          } else {
            _tools.error('error submit!!')
            return false
          }
        })
      }
    },
    callBack_page(res) {
      const self = this
      const typeList = []
      if (_validate.checkEmpty(res)) {
        self.tableData = []
      } else {
        if (_validate.checkListEmpty(res.result)) {
          self.tableData = []
        } else {
          self.tableData = res.result.result
        }
      }
      self.$refs.wptxPager.updatePageData(res.result)
    },
    callBack_configlistGroup(res) {
      const self = this
      const typeList = []
      if (_validate.checkEmpty(res)) {
        self.customData.tabType = []
        self.customData.fILTERTableData = []
      } else {
        if (_validate.checkListEmpty(res.result)) {
          self.customData.tabType = []
          self.customData.fILTERTableData = []
        } else {
          self.customData.fILTERTableData = res.result
          self.customData.tabType = res.result.filter((x, index, self) => {
            var arrids = []
            res.result.forEach((item, i) => {
              arrids.push(item.configGroup)
            })
            return arrids.indexOf(x.configGroup) === index
          })
        }
      }
      self.$refs.wptxPager.updatePageData(res.result)
    },
    callBack_configCreate(res) {
      if (res == null) {
        return false
      }
      const self = this
      if (res.code == 200) {
        _tools.openTip(self, '新增配置更新成功', 'success')
        self.customData.addShow = false
        self.form = {
          id: '',
          configGroup: '',
          configKey: '',
          configName: '',
          configValue: ''
        }
        self.customData.activeName = 'all'
        self.$refs.wptxPager.resetPageNo()
        _api.configlistGroup(self, {}, self.callBack_configlistGroup)
        self.onChangePage()
      } else {
        _tools.openTip(self, res.message, 'warning')
      }
    },
    callBack_onConfigValue(res) {
      if (res == null) {
        return false
      }
      const self = this
      if (res.code == 200) {
        _tools.openTip(self, '该配置更新成功', 'success')
        self.customData.addShow = false
        _api.configlistGroup(self, {}, self.callBack_configlistGroup)
        self.onChangePage()
      } else {
        _tools.openTip(self, res.message, 'warning')
      }
    },
    callBack_configflushFn(res) {
      if (res == null) {
        return false
      }
      const self = this
      if (res.code == 200) {
        _tools.openTip(self, '刷新redis版本号成功', 'success')
      } else {
        _tools.openTip(self, res.message, 'warning')
      }
    },
    configflushFn() {
      const self = this
      const params = '' || {}
      _api.configflush(self, params, self.callBack_configflushFn)
    },
    handleClick(tab) {
      const self = this
      self.$refs.wptxPager.resetPageNo()
      self.onInit()
    },
    handleDialogClose() {
      const self = this
      self.customData.addShow = false
      self.customData.typeVal = 1
      self.form = {
        id: '',
        configGroup: '',
        configKey: '',
        configName: '',
        configValue: ''
      }
    },
    cannelFn(formName) {
      const self = this
      self.customData.addShow = false
      self.customData.typeVal = 1
      self.form = {
        id: '',
        configGroup: '',
        configKey: '',
        configName: '',
        configValue: ''
      }
      self.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss">
@import "~@/styles/index.scss";
.el-select--medium {
  width: 100%;
}
</style>
